import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'CampusBinhai',
    component: function () {
      return import(/* webpackChunkName: "campus" */ '../views/CampusBinhai.vue')
    }
  },
  {
    path: '/about',
    name: 'About',
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  },
  {
    path: '/student',
    name: 'Profile',
    children: [
      {
        path: 'list1',
        name: 'StudentList1',
        component: function () {
          return import(/* webpackChunkName: "studentList" */ '../views/Student1.vue')
        }
      },
      {
        path: 'list2',
        name: 'StudentList2',
        component: function () {
          return import(/* webpackChunkName: "studentList" */ '../views/Student2.vue')
        } 
      }
    ],
    component: function () {
      return import(/* webpackChunkName: "profile" */ '../views/Profile.vue')
    }
  },
  {
    path: '/chashan',
    name: 'CampusChashan',
    component: function () {
      return import(/* webpackChunkName: "campus" */ '../views/CampusChashan.vue')
    },
    children: [
      {
        path: 'building5',
        name: 'Building5',
        component: function () {
          return import(/* webpackChunkName: "building" */ '../views/Building5.vue')
        }
      },
      {
        path: 'building6',
        name: 'Building6',
        component: function () {
          return import(/* webpackChunkName: "building" */ '../views/Building6.vue')
        }
      },
      {
        path: 'building7',
        name: 'Building7',
        component: function () {
          return import(/* webpackChunkName: "building" */ '../views/Building7.vue')
        }
      }
    ]
  },
  {
    path: '/yueqing',
    name: 'CampusYueqing',
    component: function () {
      return import(/* webpackChunkName: "campus" */ '../views/CampusYueqing.vue')
    }
  },
  {
    path: '/system',
    name: 'StudentSystem',
    component: function () {
      return import(/* webpackChunkName: "system" */ '../views/StudentSystem.vue')
    }
  }
]

const router = new VueRouter({
// mode: 'history' 表示使用 HTML5 History API 来实现路由导航，这样 URL 不会带有 # 符号，使 URL 看起来更像传统的网页地址。
// 例如，原本的 URL 可能是 http://example.com/#/about，使用 'history' 模式后会变成 http://example.com/about。
mode: 'history',
// base: process.env.BASE_URL 用于设置路由的基础路径。process.env.BASE_URL 通常是从环境变量中获取的，
// 这允许你根据不同的环境（如开发环境、生产环境）来动态设置路由的基础路径。
// 例如，如果 process.env.BASE_URL 被设置为 '/my-app/'，那么所有的路由路径都会以 '/my-app/' 为前缀。
base: process.env.BASE_URL,
// routes 是一个数组，包含了所有的路由配置信息。每个路由配置对象定义了一个路径、名称和对应的组件。
// 当用户访问某个路径时，Vue Router 会根据 routes 数组中的配置来渲染相应的组件。
routes
})

export default router
